<%--
  Created by IntelliJ IDEA.
  User: yasser
  Date: 2016/8/9
  Time: 16:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>自助开户</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css">
    <style type="text/css">
        .hd_my{
            background-color: red;
            text-align: center;
            color: #fff;
        }
        .bottom_my{
            background-color: red;
            text-align: center;
            color: #fff;
            height: 35px;
            line-height: 35px;
            font-weight: bold;
            position: fixed; bottom: 0; left: 0; width: 100%;
        }
    </style>
</head>
<body>
<div class="hd hd_my">
    <h1 class="page_title">微销宝</h1>
</div>
<div class="weui_cells_title" style="text-align: center; padding: 5px 0;  ">
    <h1>自助开户</h1>
    <input type="hidden" value="${parentId}" id="parentId"/>
    <input type="hidden" value="${belongCode}" id="belongCode">
    <input type="hidden" value="-1" id="flag1"/>
    <input type="hidden" value="-1" id="flag2"/>
    <input type="hidden" value="-1" id="flag3"/>
</div>
<div class="weui_cells weui_cells_form">
    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">姓名</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" id="username" name="username" type="text" placeholder="请输入姓名"/>
        </div>
    </div>
    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">身份证号</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" name="cid" id="cid" onblur="register.validateCid(this.value);" type="number" placeholder="请输入身份证号"/>
        </div>
    </div>
    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">手机号</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" id="phone" name="phone" onblur="register.validatePhone(this.value);" type="number" placeholder="请输入手机号"/>
        </div>
    </div>
    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">验证码</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="number" id="phoneCode" onblur="register.validatePhoneCode(this.value);" placeholder="请输入验证码"/>
        </div>
        <div class="weui_cell_ft">
            <a id="sendCodeBtn" href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">获取验证码</a>
        </div>
    </div>
</div>
<div class="weui_btn_area">
    <a class="weui_btn weui_btn_primary" href="javascript:" id="btnSubmit">提交</a>
</div>

</body>
<!-- body 最后 -->
<script src="res/js/zepto.min.js"></script>
<script src="res/js/Validator.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function(){
        // 为按钮绑定点击事件
        $("#sendCodeBtn").one("click", function(){
            register.sendCode();
        })

        $("#bt")
    })
    var register = {
        waitTime : 100,
        url : {
            validateCid : "/wxb/register/validate/cid",
            validatePhone : "/wxb/register/validate/phone",
            validatePhoneCode : "/wxb/register/validate/phoneCode",
            registerSubmit : "/wxb/register/sumbit"
        },
        showToast : function (text, _time) {
            $("#toast .weui_toast_content").text(text);
            $('#toast').show();
            setTimeout(function () {
                $('#toast').hide();
            }, _time);
        },
        codeTimer : function(){
            // 2、将按钮的文字变为倒计时秒数
            setInterval(function(){
                register.waitTime = register.waitTime - 1;
                $("#sendCodeBtn").text("时效："+ register.waitTime + "秒");
                if(register.waitTime <= 0){
                    // 移出定时器
                    window.clearInterval(register.codeTimer());
                    // 将按钮设置为可用
                    $("#sendCodeBtn").removeClass("weui_btn_disabled");
                    $("#sendCodeBtn").text("获取验证码");
                    /**/
                    // 为按钮绑定点击事件
                    $("#sendCodeBtn").one("click", function(){
                        register.sendCode();
                    })
                    register.waitTime = 100;
                }
            }, 1000);
        },

        sendCode : function(){
            var _phone = $("#phone").val();
            if(_phone =="" || !Validator.phone(_phone)){
                alert("请输入正确的手机号");
            }else{
                // 1、将获取验证码按钮设置为不可点击
                $("#sendCodeBtn").addClass("weui_btn_disabled");
                $.post("url", {"phone":_phone}, function (result) {
                   if(result.status ==1){
                       // 2、将按钮的文字变为倒计时秒数
                       register.codeTimer();
                       register.showToast(result.msg, 1000);
                   } else {
                        register.showToast(result.msg, 2000);
                   }
                });

            }
        },
        validateCid : function (_cid) {
            var getUrl = reister.url.validateCid + "?cid=" + _cid + "&_=" + new Date().time();
            $.get(getUrl, function (result) {
                if(result.status != 1){
                    register.showToast(result.msg, 1000);
                }
                $("#flag1").val(result.status);
            });
        },
        validatePhone : function (_phone) {
            var getUrl = register.url.validatePhone + "?phone=" + _phone + "&_=" + new Date().time();
            $.get(getUrl, function (result) {
                if(result.status != 1){
                    register.showToast(result.msg, 1000);
                }
                $("#flag2").val(result.status);
            });
        },
        validatePhoneCode : function (_phoneCode) {
            var getUrl = register.url.validatePhoneCode + "?phoneCode=" + _phoneCode + "&_=" + new Date().time();
            $.get(getUrl, function (result) {
                if(result.status != 1){
                   register.showToast(result.msg, 1000);
                }
                $("#flag3").val(result.status);
            });
        },
        submitData : function () {
            var belongCode = $("#belongCode").val();
            var parentId = $("#parentId").val();
            var username = $("#username").val();
            var cid = $("#cid").val();
            var phone = $("#phone").val();
            var flag1 = $("#flag1").val();
            var flag2 = $("#flag2").val();
            var flag3 = $("#flag3").val();
            if(flag1 == 1 && flag2==1 && flag3==3){
                $.post(register.url.registerSubmit,
                        {
                            "belong":belongCode,
                            "parentId":parentId,
                            "username":username,
                            "cid":cid,
                            "phone":phone
                        },
                        function (result) {
                            register.showToast(result.msg, 2000);
                            if(result.status ==1){
                                window.location.href = "/index";
                            }
                        });
            }else{
                register.showToast("注册信息不正确，请检查", 1000);
            }

        }
    };
</script>
</html>
